<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="recording and transcoding system">
    <meta name="author" content="typefo">
    <link rel="icon" href="favicon.ico">
    <title>pbxMon System</title>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link type="text/css" rel="stylesheet" href="/css/route.css">
  </head>
  <body>
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">
            <img alt="Brand" src="/img/logo.png" width="34" style="margin-top:-8px" />
          </a>
          <a class="navbar-brand">pbxMon</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="/cdr">通话记录</a></li>
            <li><a href="/server">网关管理</a></li>
            <li><a href="/route">路由管理</a></li>
            <li><a href="/interface">接口管理</a></li>
            <li><a href="/report">数据报表</a></li>
            <li><a href="/system/status">服务器状态</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/system/option"><span class="glyphicon glyphicon-cog"></span> 系统设置</a></li>
            <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> 退 出</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="row">
        <ol class="breadcrumb">
          <li><a href="/cdr">Home</a></li>
          <li><a href="/route">Route</a></li>
          <li class="active"><?php echo isset($route) ? $route['name'] : 'unknown';?></li>
          <li class="pull-right add"><button class="btn btn-success btn-xs" onclick="create()"><span class="glyphicon glyphicon-plus"></span> 创 建</button></li>
        </ol>
      </div>
      <div class="row">
        <table class="table table-hover table-condensed">
          <thead>
          <tr><th class="tab-left">#</th><th class="text-left">路由规则</th><th>匹配类型</th><th>呼出接口</th><th>目标网关</th><th>备注信息</th><th colspan="2">排 序</th><th>删 除</th><th class="tab-right">编 辑</th></tr>
          </thead>
          <tbody>
          <?php
          if (isset($data)) {
            $id = 1;
            foreach ($data as $obj) {
              echo '<tr><td class="tab-left">',$id,'</td><td class="text-left">',$obj['rexp'],'</td><td>',$obj['type'],'</td><td>',$obj['sofia'],'</td><td>',explode(':', $obj['server'])[0],'</td><td>',$obj['description'],'</td><td><a class="text-muted" href="javascript:void(0);" onClick="sort(',"'up',",$obj['id'],')"><span class="glyphicon glyphicon-arrow-up"></span></a></td><td><a class="text-muted" href="javascript:void(0);" onClick="sort(',"'down',",$obj['id'],')"><span class="glyphicon glyphicon-arrow-down"></span></a></td><td><button class="btn btn-default btn-xs" onClick="drop(',$obj['id'],')"><span class="glyphicon glyphicon-trash"></span> 删 除</button></td><td><button class="btn btn-default btn-xs" onclick="change(',$obj['id'],')"><span class="glyphicon glyphicon-edit"></span> 编 辑</button></td></tr>',"\n";
              $id++;
            }
          }
          ?>
          </tbody>
        </table>
        </div>
    </div>
  </body>
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/js/layer.js"></script>
  <script type="text/javascript">
  function srvlist() {
    var url = '/api/server';
    $.get(url, function(response, status) {
      if (status == 'success') {
        console.log(response);
        var list = '';
        for (var i in response.data) {
          list += '<option value="' + response.data[i].ip + ':' + response.data[i].port + '">' + response.data[i].name + '</option>';
        }
        $(list).appendTo("#server");
      }
    });
  }

  function create() {
    var templete = '<form class="form-horizontal" action="/dialplan/create" method="post" style="width:530px">'+
        '<div class="form-group">'+
        '<label class="col-sm-4 control-label">路由规则</label>'+
        '<div class="col-sm-5">'+
        '<input type="text" class="form-control" name="rexp" placeholder="Enter route rule">'+
        '</div>'+
        '<div class="col-sm-3">'+
        '<span class="help-block">拨号路由规则</span>'+
        '</div>'+
        '</div>'+
        '<div class="form-group">'+
        '<label class="col-sm-4 control-label">匹配类型</label>'+
        '<div class="col-sm-5">'+
        '<select class="form-control" name="type">'+
        '<option value="1">主叫号码</option>'+
        '<option value="2">被叫号码</option>'+
        '</select>'+
        '</div>'+
        '<div class="col-sm-3">'+
        '<span class="help-block">路由匹配对象</span>'+
        '</div>'+
        '</div>'+
        '<div class="form-group">'+
        '<label class="col-sm-4 control-label">呼出接口</label>'+
        '<div class="col-sm-5">'+
        '<select class="form-control" name="sofia">'+
        <?php
        if (isset($interfaces)) {
            foreach ($interfaces as $interface) {
                echo "'<option value=\"", $interface['id'],"\">",$interface['name']," (",$interface['ip'],")</option>'+\n";
            }
        }
        ?>
        '</select>'+
        '</div>'+
        '<div class="col-sm-3">'+
        '<span class="help-block">绑定呼出接口</span>'+
        '</div>'+
        '</div>'+
        '<div class="form-group">'+
        '<label class="col-sm-4 control-label">目标网关</label>'+
        '<div class="col-sm-5">'+
        '<input type="text" class="form-control" name="server" list="server" placeholder="Enter gateway">'+
        '<datalist id="server">'+
        '</datalist>'+
        '</div>'+
        '<div class="col-sm-3">'+
        '<span class="help-block">呼出目标网关</span>'+
        '</div>'+
        '</div>'+
        '<div class="form-group">'+
        '<label class="col-sm-4 control-label">备注信息</label>'+
        '<div class="col-sm-5">'+
        '<input type="text" class="form-control" name="description" placeholder="Enter description">'+
        '</div>'+
        '<div class="col-sm-3">'+
        '<span class="help-block">路由备注信息</span>'+
        '</div>'+
        '</div>'+
        '<div class="form-group">'+
        '<div class="col-sm-offset-4 col-sm-8">'+
        '<input type="hidden" name="rid" value="<?php echo isset($route) ? $route['id'] : '';?>">'+
        '<button type="submit" class="btn btn-success">创 建</button><a href="javascript:void(0);" onClick="layer.closeAll()" class="btn btn-default">取 消</a>'+
        '</div>'+
        '</div>'+
        '</form>';

    layer.open({
      type: 1,
      title: '创建路由规则',
      area: ['580px', '370px'],
      content: templete
    });

    srvlist();
  }

  function change(id) {
    var url = '/dialplan/edit?id=' + id;
    $.get(url, function(response, status){
      if (status == 'success') {
        var obj = response.data;
        var sofia = response.sofia;
        var templete = '<form class="form-horizontal" action="/dialplan/edit?id=' + obj.id + '" method="post" style="width:550px">'+
            '<div class="form-group">'+
            '<label class="col-sm-4 control-label">路由规则</label>'+
            '<div class="col-sm-5">'+
            '<input type="hidden" name="rid" value="' + obj.rid + '"/>'+
            '<input type="text" class="form-control" name="rexp" value="' + obj.rexp + '" placeholder="Enter route rule">'+
            '</div>'+
            '<div class="col-sm-3">'+
            '<span class="help-block">拨号路由规则</span>'+
            '</div>'+
            '</div>'+
            '<div class="form-group">'+
            '<label class="col-sm-4 control-label">匹配类型</label>'+
            '<div class="col-sm-5">'+
            '<select class="form-control" name="type">'+
            '<option value="1"' + (obj.type == 1 ? ' selected="selected"' : '') + '>主叫号码</option>'+
            '<option value="2"' + (obj.type == 2 ? ' selected="selected"' : '') + '>被叫号码</option>'+
            '</select>'+
            '</div>'+
            '<div class="col-sm-3">'+
            '<span class="help-block">路由匹配对象</span>'+
            '</div>'+
            '</div>'+
            '<div class="form-group">'+
            '<label class="col-sm-4 control-label">呼出接口</label>'+
            '<div class="col-sm-5">'+
            '<select class="form-control" name="sofia">';

            for (var i in sofia) {
              var selected = (obj.sofia == sofia[i].id) ? ' selected="selected"' : '';
              templete += '<option value="' + sofia[i].id + '"' + selected + '>' + sofia[i].name + ' (' + sofia[i].ip + ')</option>';
            }

            templete += '</select>'+
            '</div>'+
            '<div class="col-sm-3">'+
            '<span class="help-block">绑定呼出接口</span>'+
            '</div>'+
            '</div>'+
            '<div class="form-group">'+
            '<label class="col-sm-4 control-label">目标网关</label>'+
            '<div class="col-sm-5">'+
            '<input type="text" class="form-control" name="server" value="' + obj.server+ '" list="server" placeholder="Enter gateway">'+
            '<datalist id="server">'+
            '</datalist>'+
            '</div>'+
            '<div class="col-sm-3">'+
            '<span class="help-block">呼出目标网关</span>'+
            '</div>'+
            '</div>'+
            '<div class="form-group">'+
            '<label class="col-sm-4 control-label">备注信息</label>'+
            '<div class="col-sm-5">'+
            '<input type="text" class="form-control" name="description" value="' + obj.description + '" placeholder="Enter description">'+
            '</div>'+
            '<div class="col-sm-3">'+
            '<span class="help-block">路由备注信息</span>'+
            '</div>'+
            '</div>'+
            '<div class="form-group">'+
            '<div class="col-sm-offset-4 col-sm-8">'+
            '<button type="submit" class="btn btn-success">保 存</button><a href="javascript:void(0);" onClick="layer.closeAll()" class="btn btn-default">取 消</a>'+
            '</div>'+
            '</div>'+
            '</form>';

        layer.open({
          type: 1,
          title: '编辑路由规则',
          area: ['580px', '370px'],
          content: templete
        });
      }
    });

    srvlist();
  }

  function sort(op, id) {
    var url = '/dialplan/' + op + '?id=' + id;
    $.get(url, function() {
        window.location.reload();
    });
  }

  function drop(id) {
    layer.confirm('亲，确定要删除？', {
        btn: ['是','否'], icon: 3
      }, function(){
        var url = '/dialplan/delete?id=' + id;
        $.get(url, function(response, status){
          if (status == 'success') {
            layer.msg('删除成功!', {icon: 1, time: 1000});
            setTimeout(function() {
              window.location.reload();
            }, 1000);
          } else {
            layer.msg('删除失败!', {icon: 2, time: 1000});
          }
        });
    });
  }
  </script>
</html>
